<template>
  <div class="student-home">
    <!-- 顶部信息栏 -->
    <!-- <div class="top-bar">
      <div class="user-info">
        <span>{{ userInfo.name }}</span>
        <span class="class-name">{{ userInfo.class_name }}</span>
        <button class="change-pwd-btn" @click="showPasswordModal = true">修改密码</button>
      </div>
    </div> -->
    
    <!-- 主内容区域 -->
    <div class="content-wrapper">
      <!-- 左侧：作业提交列表 -->
      <div class="left-panel">
        <div class="panel-header">
          <h3>我的作业提交</h3>
          <button class="submit-btn" @click="showSubmitModal = true">新增作业提交</button>
        </div>
        <div class="submission-list">
          <table class="submission-table">
            <thead>
              <tr>
                <th>提交日期</th>
                <th>作业名称</th>
                <!-- <th>提交内容</th> -->
                <th>评分</th>
                <th>评价</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in submissions" :key="item.id">
                <td>{{ formatDate(item.submittedAt) }}</td>
                <td>{{ item.homework.title }}</td>
                <!-- <td class="content-cell">
                  <div v-if="item.content">
                    {{ item.content.substring(0, 50) }}{{ item.content.length > 50 ? '...' : '' }}
                  </div>
                  <div v-if="item.file_path" class="file-link">
                    <a :href="getFilePath(item.file_path)" target="_blank">查看附件</a>
                  </div>
                </td> -->
                <td class="score-cell">
                  <span class="score" :class="{ 'scored': item.score !== null }">
                    {{ item.score !== null ? item.score : '待评分' }}
                  </span>
                </td>
                <td class="comment-cell">
                  <div v-if="item.comment">
                    {{ item.comment.substring(0, 30) }}{{ item.comment.length > 30 ? '...' : '' }}
                  </div>
                  <div v-else class="no-comment">暂无评价</div>
                </td>
                <td class="status-cell">
                  <span v-if="item.isRejectedRecord" class="status rejected">已退回</span>
                  <span v-else-if="item.score !== null" class="status scored">已评分</span>
                  <span v-else class="status pending">待评分</span>
                </td>
                <td class="action-cell">
                  <button class="view-btn" @click="viewSubmission(item)">查看作业</button>
                </td>
              </tr>
            </tbody>
          </table>
          <div v-if="submissions.length === 0" class="empty-tip">暂无作业提交记录</div>
        </div>
      </div>
      
      <!-- 右侧：排名信息 -->
      <div class="right-panel">
        <!-- 年级排名 -->
        <div class="rank-section">
          <h4>年级评分总分前10名</h4>
          <div class="rank-list">
            <div v-for="student in calculatedGradeRankings" :key="student.id" class="rank-item">
              <span class="rank-num">{{ student.displayRank }}</span>
              <span class="student-name">{{ student.name }}</span>
              <span class="student-class">{{ student.className || '未知班级' }}</span>
              <span class="total-score">{{ student.total_score }}</span>
            </div>
          </div>
        </div>
        
        <!-- 班级排名 -->
        <div class="rank-section">
          <h4>班级内评分总分排名</h4>
          <div class="rank-list">
            <div v-for="student in calculatedClassRankings" :key="student.id" class="rank-item">
              <span class="rank-num">{{ student.displayRank }}</span>
              <span class="student-name">{{ student.name }}</span>
              <span class="total-score">{{ student.total_score }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 提交作业弹窗 -->
    <div class="modal" v-if="showSubmitModal" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>提交作业</h3>
          <button class="close-btn" @click="closeModal">×</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="submitHomework">
            <div class="form-group">
              <label>选择作业</label>
              <select v-model="submitForm.homework_id" required @change="onHomeworkChange">
                <option value="" disabled>请选择作业</option>
                <option v-for="homework in availableHomeworks" :key="homework.id" :value="homework.id">
                  {{ homework.title || homework.name }}
                  <span v-if="this.isHomeworkRejected(homework.id)" class="rejected-tag">(已退回)</span>
                </option>
              </select>
              <div class="form-tip">说明：只有新作业和被退回的作业可以提交</div>
            </div>
            <!-- 显示所选作业的要求 -->
            <div v-if="selectedHomeworkContent" class="form-group">
              <label>作业要求</label>
              <div class="homework-content" v-html="selectedHomeworkContent"></div>
            </div>
            <!-- 显示所选作业的图片 -->
            <div v-if="selectedHomeworkImages && selectedHomeworkImages.length > 0" class="form-group">
              <label>作业图片</label>
              <div class="homework-images">
                <img v-for="(image, index) in selectedHomeworkImages" :key="index" :src="image" class="homework-image-preview" :alt="`作业图片 ${index + 1}`">
              </div>
            </div>
            <div class="form-group">
              <label>我的作业内容</label>
              <textarea v-model="submitForm.content" rows="7" placeholder="请输入我的作业内容"></textarea>
            </div>
            <div class="form-group">
              <label>粘贴图片 (可选，可以采用Shift+win+s 组合键来实现截图)</label>
              <div 
                class="paste-area"
                contenteditable
                @paste="handlePaste"
                placeholder="在此处粘贴图片"
              ></div>
              <div v-if="pastedImages.length > 0" class="pasted-images">
                <img 
                  v-for="(img, index) in pastedImages" 
                  :key="index" 
                  :src="img" 
                  class="pasted-img"
                >
              </div>
            </div>
            <div class="modal-footer">
              <button type="submit" class="submit-btn">提交</button>
              <button type="button" class="cancel-btn" @click="closeModal">取消</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    
    <!-- 修改密码弹窗 -->
    <!-- <div class="modal" v-if="showPasswordModal" @click="closePasswordModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>修改密码</h3>
          <button class="close-btn" @click="closePasswordModal">×</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="updatePassword">
            <div class="form-group">
              <label>旧密码</label>
              <input type="password" v-model="passwordForm.oldPassword" required placeholder="请输入旧密码">
            </div>
            <div class="form-group">
              <label>新密码</label>
              <input type="password" v-model="passwordForm.newPassword" required placeholder="请输入新密码">
            </div>
            <div class="form-group">
              <label>确认密码</label>
              <input type="password" v-model="passwordForm.confirmPassword" required placeholder="请确认新密码">
            </div>
            <div class="modal-footer">
              <button type="submit" class="submit-btn">确认修改</button>
              <button type="button" class="cancel-btn" @click="closePasswordModal">取消</button>
            </div>
          </form>
        </div>
      </div>
    </div> -->
    <!-- 查看作业弹窗 -->
    <div class="modal" v-if="showViewModal" @click="closeViewModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>查看作业</h3>
          <button class="close-btn" @click="closeViewModal">×</button>
        </div>
        <div class="modal-body">
          <div v-if="currentSubmission" class="submission-detail">
            <div class="detail-item">
              <label>作业名称：</label>
              <span>{{ currentSubmission.homework?.title || '未知作业' }}</span>
            </div>
            <div class="detail-item">
              <label>提交日期：</label>
              <span>{{ formatDate(currentSubmission.submittedAt) }}</span>
            </div>
            <div class="detail-item">
              <label>提交内容：</label>
              <div class="content-display">{{ currentSubmission.content || '暂无内容' }}</div>
            </div>
            <div v-if="getSubmissionImages(currentSubmission).length > 0" class="detail-item">
              <label>提交图片：</label>
              <div class="submission-images">
                <img 
                  v-for="(img, index) in getSubmissionImages(currentSubmission)" 
                  :key="index" 
                  :src="img" 
                  class="submission-img"
                  :alt="`作业图片 ${index + 1}`"
                >
              </div>
            </div>
            <div v-if="currentSubmission.file_path" class="detail-item">
              <label>附件：</label>
              <a :href="getFilePath(currentSubmission.file_path)" target="_blank" class="file-link">查看附件</a>
            </div>
            <div class="detail-item">
              <label>评分：</label>
              <span>{{ currentSubmission.score !== null ? currentSubmission.score : '待评分' }}</span>
            </div>
            <div class="detail-item">
              <label>评价：</label>
              <div class="comment-display">{{ currentSubmission.comment || '暂无评价' }}</div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="close-btn" @click="closeViewModal">关闭</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { api } from '@/utils/api.js';
import { showMessage, formatDate } from '@/utils/common.js';

export default {
  name: 'StudentHome',
  data() {
    return {
      userInfo: {},
      submissions: [],
      gradeRankings: [],
      classRankings: [],
      availableHomeworks: [],
      showSubmitModal: false,
      showPasswordModal: false,
      showViewModal: false,
      currentSubmission: null,
      submitForm: {
        homework_id: '',
        content: ''
      },
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },

      pastedImages: [],
      selectedHomeworkImages: [],
      selectedHomeworkContent: ''
    };
  },
  computed: {
    /**
     * 计算年级排名，相同分数相同排名
     */
    calculatedGradeRankings() {
      const rankings = [...this.gradeRankings];
      // 确保数据已排序
      rankings.sort((a, b) => b.total_score - a.total_score);
      
      let currentRank = 1;
      let prevScore = null;
      
      return rankings.map((student, index) => {
        if (prevScore !== null && student.total_score !== prevScore) {
          currentRank = index + 1;
        }
        
        prevScore = student.total_score;
        
        return {
          ...student,
          displayRank: currentRank
        };
      });
    },
    
    /**
     * 计算班级排名，相同分数相同排名
     */
    calculatedClassRankings() {
      const rankings = [...this.classRankings];
      // 确保数据已排序
      rankings.sort((a, b) => b.total_score - a.total_score);
      
      let currentRank = 1;
      let prevScore = null;
      
      return rankings.map((student, index) => {
        if (prevScore !== null && student.total_score !== prevScore) {
          currentRank = index + 1;
        }
        
        prevScore = student.total_score;
        
        return {
          ...student,
          displayRank: currentRank
        };
      });
    }
  },
  
  methods: {
    /**
     * 初始化页面数据
     */
    async initData() {
      try {
        // 获取用户信息
        const userInfoResp = await api.getUserInfo();
        this.userInfo = userInfoResp.data || userInfoResp;
        
        // 获取作业提交列表
        const submissionsResp = await api.getStudentSubmissions();
        this.submissions = submissionsResp.data || submissionsResp;
        
        // 获取年级排名
        const gradeRankResp = await api.getGradeRankings();
        this.gradeRankings = Array.isArray(gradeRankResp.data) ? gradeRankResp.data.slice(0, 10) : [];
        
        // 获取班级排名
        console.log('获取班级排名，classId:', this.userInfo.classId);
        try {
          const classRankResp = await api.getClassRankings(this.userInfo.classId);
          console.log('班级排名API返回:', classRankResp);
          this.classRankings = classRankResp.data || [];
          console.log('设置班级排名数据:', this.classRankings);
        } catch (error) {
          console.error('获取班级排名失败:', error);
          this.classRankings = [];
        }
        
        // 获取可选作业列表 - 包括新作业和被退回的作业
        await this.loadAvailableHomeworks();
      } catch (error) {
        showMessage(error.message || '加载数据失败', 'error');
      }
    },
    
    /**
     * 加载可选作业列表
     * 直接使用后端返回的作业清单，不再进行前端过滤
     */
    async loadAvailableHomeworks() {
      try {
        // 获取所有可用作业
        const homeworksResp = await api.getAvailableHomeworks();
        const allHomeworks = homeworksResp.data || [];
        
        // 在控制台显示从API获取的可用作业清单
        console.log('从API获取的可用作业清单:', allHomeworks);
        
        // 直接使用后端返回的作业清单，不再进行前端过滤
        this.availableHomeworks = allHomeworks;
        
        console.log('使用后端返回的作业清单:', this.availableHomeworks);
      } catch (error) {
        console.error('加载可用作业失败:', error);
        this.availableHomeworks = [];
      }
    },
    
    /**
     * 关闭作业提交弹窗
     */
    closeModal() {
      this.showSubmitModal = false;
      this.resetForm();
    },
    
    /**
     * 关闭密码修改弹窗
     */
    closePasswordModal() {
      this.showPasswordModal = false;
      this.passwordForm = {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      };
    },
    
    /**
     * 重置表单
     */
    resetForm() {
      this.submitForm = {
        homework_id: '',
        content: ''
      };
      this.pastedImages = [];
      this.selectedHomeworkImages = [];
      this.selectedHomeworkContent = '';
    },
    
    /**
     * 作业选择变化处理
     */
    onHomeworkChange() {
      if (this.submitForm.homework_id) {
        const selectedHomework = this.availableHomeworks.find(hw => hw.id === this.submitForm.homework_id);
        if (selectedHomework) {
          // 显示作业要求
          this.selectedHomeworkContent = selectedHomework.content || '';
          // 显示作业图片
          if (selectedHomework.images) {
            this.selectedHomeworkImages = this.parseImages(selectedHomework.images);
          } else {
            this.selectedHomeworkImages = [];
          }
        } else {
          this.selectedHomeworkContent = '';
          this.selectedHomeworkImages = [];
        }
      } else {
        this.selectedHomeworkContent = '';
        this.selectedHomeworkImages = [];
      }
    },
    
    /**
     * 解析图片数据
     * @param {string|Array} imagesData - 图片数据字符串或数组
     * @returns {Array} 图片URL数组
     */
    parseImages(imagesData) {
      if (!imagesData) return [];
      
      // 处理从后端返回的图片路径数据
      if (Array.isArray(imagesData)) {
        // 确保图片路径正确，添加基础URL如果需要
        return imagesData.map(path => {
          // 如果已经是完整URL，则直接返回
          if (path.startsWith('http://') || path.startsWith('https://')) {
            return path;
          }
          // 对于/uploads/开头的路径，直接使用
          if (path.startsWith('/uploads/')) {
            return path;
          }
          // 对于相对路径或文件名，添加/uploads/images/前缀
          return `/uploads/images/${path}`;
        });
      }
      
      // 尝试解析JSON字符串
      if (typeof imagesData === 'string') {
        try {
          const parsed = JSON.parse(imagesData);
          return Array.isArray(parsed) ? this.parseImages(parsed) : [imagesData];
        } catch (e) {
          // 如果不是有效的JSON，直接返回包含该字符串的数组
          return [imagesData];
        }
      }
      
      return [];
    },
    
    /**
     * 更新密码
     */
    async updatePassword() {
      try {
        if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
          showMessage('两次输入的密码不一致', 'error');
          return;
        }
        
        await api.updatePassword(this.passwordForm);
        showMessage('密码修改成功', 'success');
        this.closePasswordModal();
      } catch (error) {
        showMessage(error.message || '密码修改失败', 'error');
      }
    },
    

    
    /**
     * 处理粘贴图片
     */
    handlePaste(event) {
      const items = (event.clipboardData || event.originalEvent.clipboardData).items;
      for (let index in items) {
        const item = items[index];
        if (item.kind === 'file') {
          const blob = item.getAsFile();
          // 限制图片大小，防止过大的图片占用过多内存
          if (blob.size > 5 * 1024 * 1024) { // 5MB限制
            showMessage('图片大小不能超过5MB', 'error');
            return;
          }
          const reader = new FileReader();
          reader.onload = (event) => {
            this.pastedImages.push(event.target.result);
          };
          reader.onerror = () => {
            console.error('图片读取失败');
          };
          reader.readAsDataURL(blob);
        }
      }
    },
    
    /**
     * 提交作业
     */
    async submitHomework() {
      try {
        // 检查是否是重新提交被退回的作业
        // 使用与isHomeworkRejected方法和后端一致的isRejectedRecord字段
        const isRejectedHomework = this.submissions.some(submission => 
          submission.homeworkId === this.submitForm.homework_id && submission.isRejectedRecord
        );
        
        const formData = new FormData();
        formData.append('homeworkId', this.submitForm.homework_id);
        formData.append('content', this.submitForm.content);
        // 添加是否是重新提交的标识
        formData.append('isResubmit', isRejectedHomework ? 'true' : 'false');
        
        // 优化图片数据处理，减少内存占用
        // 创建临时数组，避免直接引用this.pastedImages
        const tempImagesArray = [...this.pastedImages];
        const imagesData = JSON.stringify(tempImagesArray);
        formData.append('images', imagesData);
        
        await api.submitHomework(formData);
        showMessage(isRejectedHomework ? '作业重新提交成功' : '作业提交成功', 'success');
        
        // 立即清理图片数据，释放内存
        this.clearImageData();
        this.closeModal();
        
        // 重新加载数据
        await this.initData();
      } catch (error) {
        console.error('提交作业失败:', error);
        showMessage(error.message || '提交失败', 'error');
      }
    },
    
    /**
     * 清理图片数据，释放内存
     */
    clearImageData() {
      // 清空图片数组
      this.pastedImages = [];
      // 触发垃圾回收（如果浏览器支持）
      if (window.gc) {
        try {
          window.gc();
        } catch (e) {
          console.log('无法手动触发垃圾回收');
        }
      }
    },
    
    /**
     * 获取文件路径
     */
    getFilePath(path) {
      // 直接返回/uploads开头的路径，不添加/api前缀
      if (path.startsWith('/')) {
        return path;
      }
      return `/uploads/${path}`;
    },
    
    /**
     * 检查作业是否被退回
     * @param {number} homeworkId - 作业ID
     * @returns {boolean} 是否被退回
     */
    isHomeworkRejected(homeworkId) {
      return this.submissions.some(submission => 
        submission.homeworkId === homeworkId && submission.isRejectedRecord
      );
    },
    
    /**
     * 格式化日期
     */
    formatDate(date) {
      return formatDate(date);
      },
      
      /**
       * 查看作业详情
       */
      viewSubmission(submission) {
        this.currentSubmission = submission;
        this.showViewModal = true;
      },

      /**
       * 关闭查看作业弹窗
       */
      closeViewModal() {
        this.showViewModal = false;
        this.currentSubmission = null;
      },

      /**
       * 获取作业图片
       */
      getSubmissionImages(submission) {
        if (!submission.images) return [];
        return this.parseImages(submission.images);
      }
  },
  mounted() {
    this.initData();
  },
  
  /**
   * 组件卸载时清理资源，防止内存泄漏
   */
  beforeUnmount() {
    // 清理图片数据
    this.clearImageData();
    // 清理其他可能占用内存的资源
    this.submissions = [];
    this.gradeRankings = [];
    this.classRankings = [];
    this.availableHomeworks = [];
  }
};
</script>

<style scoped>
.student-home {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.top-bar {
  background-color: #1E9FFF;
  color: white;
  padding: 15px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-info {
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.change-pwd-btn {
  background-color: #fff;
  color: #1E9FFF;
  border: 1px solid #1E9FFF;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.change-pwd-btn:hover {
  background-color: #1E9FFF;
  color: white;
}

.class-name {
  margin-left: 20px;
  font-size: 14px;
  opacity: 0.9;
}

.content-wrapper {
  flex: 1;
  display: flex;
  padding: 20px;
  gap: 20px;
  overflow: hidden;
}

.left-panel {
  flex: 3;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-header {
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-header h3 {
  margin: 0;
  color: #333;
}

.submit-btn {
  background-color: #1E9FFF;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-btn:hover {
      background-color: #40A9FF;
    }

    .action-cell {
      text-align: center;
    }

    .view-btn {
      background-color: #5FB878;
      color: white;
      border: none;
      padding: 4px 12px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }

    .view-btn:hover {
      background-color: #4CAF50;
    }

    .submission-detail {
      padding: 10px 0;
    }

    .detail-item {
      margin-bottom: 15px;
    }

    .detail-item label {
      font-weight: bold;
      display: inline-block;
      width: 100px;
      vertical-align: top;
    }

    .content-display,
    .comment-display {
      display: inline-block;
      width: calc(100% - 110px);
      white-space: pre-wrap;
      word-break: break-word;
    }

    .submission-images {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }

    .submission-img {
      max-width: 200px;
      max-height: 200px;
      border: 1px solid #eee;
      border-radius: 4px;
    }

.submission-list {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.submission-table {
  width: 100%;
  border-collapse: collapse;
}

.submission-table th {
  background-color: #f5f5f5;
  padding: 12px;
  text-align: left;
  font-weight: 500;
  color: #666;
  border-bottom: 2px solid #e8e8e8;
}

.submission-table td {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.content-cell {
  max-width: 300px;
}

.file-link a {
  color: #1E9FFF;
  text-decoration: none;
}

.file-link a:hover {
  text-decoration: underline;
}

.score-cell {
  width: 80px;
}

.score {
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
  }

  .scored {
    background-color: #f0f9ff;
    color: #1E9FFF;
  }
  
  .status-cell {
    text-align: center;
  }
  
  .status {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
  }
  
  .status.pending {
    background-color: #E3F2FD;
    color: #1976D2;
  }
  
  .status.scored {
    background-color: #E8F5E9;
    color: #388E3C;
  }
  
  .status.rejected {
    background-color: #D32F2F;
    color: #FFFFFF;
    font-weight: bold;
  }
  
  .rejected-tag {
    color: #D32F2F;
    font-size: 12px;
    margin-left: 5px;
  }
  
  .form-tip {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
    font-style: italic;
  }

.comment-cell {
  max-width: 200px;
}

.no-comment {
  color: #999;
  font-style: italic;
}

.empty-tip {
  text-align: center;
  padding: 40px;
  color: #999;
}

.rank-section {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.rank-section h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
}

.rank-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rank-item {
  display: flex;
  align-items: center;
  padding: 8px;
  background-color: #f9f9f9;
  border-radius: 4px;
  flex-wrap: nowrap;
}

.rank-num {
  width: 24px;
  height: 24px;
  background-color: #1E9FFF;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  margin-right: 10px;
}

.student-name {
  flex: 1;
  width: 60px;
}

.student-class {
  width:120px;
  /* width: 100px;
  color: #666;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
  flex:1;
  margin-right: 50px;
}

.total-score {
  font-weight: 500;
  color: #1E9FFF;
  margin-left: 10px;
}

/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  width: 600px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 作业图片预览样式 */
.homework-images {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.homework-content {
  padding: 10px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  min-height: 60px;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.5;
  font-size: 14px;
}

.homework-image-preview {
  max-width: 100%;
  max-height: 200px;
  margin: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.modal-header h3 {
  margin: 0;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.close-btn:hover {
  color: #333;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #666;
  font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-group textarea {
  resize: vertical;
}

.paste-area {
  min-height: 100px;
  border: 1px dashed #ddd;
  border-radius: 4px;
  padding: 10px;
  cursor: text;
}

.paste-area:focus {
  outline: none;
  border-color: #1E9FFF;
}

.pasted-images {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pasted-img {
  max-width: 100px;
  max-height: 100px;
  border-radius: 4px;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cancel-btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.cancel-btn:hover {
  background-color: #f5f5f5;
}
</style>